<template>
    <el-container>
        <el-header>
            <div class="left-panel">
            </div>
            <div class="right-panel">
                <div class="right-panel-search" style="flex-wrap:wrap;">
                    <el-input style="margin:5px 10px" v-model="search.apply_code" placeholder="请输入客户编号" clearable @keyup.enter="upsearch"></el-input>
                    <el-input style="margin:5px 10px" v-model="search.company_name" placeholder="请输入公司名称" clearable @keyup.enter="upsearch"></el-input>
                    <el-input style="margin:5px 10px" v-model="search.contacts" placeholder="请输入对接人" clearable @keyup.enter="upsearch"></el-input>
                    <!-- <el-cascader v-model="search.order_shop" :options="humList" :props="humProps" collapse-tags :show-all-levels="false" clearable placeholder="请选择所属人"></el-cascader> -->
                    <el-date-picker v-model="search.create_time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh">重置</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" remoteSort remoteFilter border>
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column label="客户编号" prop="customer.apply_code" align="center"></el-table-column>
                <el-table-column label="公司名称" prop="customer.company_name" align="center"></el-table-column>
                <el-table-column label="对接人" prop="customer.contacts" align="center"></el-table-column>
                <el-table-column label="手机号码" prop="customer.mobile" align="center"></el-table-column>
                <el-table-column label="所属酒店" prop="customer.hotel.hotel_name" align="center"></el-table-column>
                <!-- <el-table-column label="所属人" prop="withProfession.title" align="center"></el-table-column> -->
                <el-table-column label="沟通内容" prop="content" align="center"></el-table-column>
                <el-table-column label="沟通类型" prop="type" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type == 1" type="success">微信</el-tag>
                        <el-tag v-if="scope.row.type == 2" type="warning">电话</el-tag>
                        <el-tag v-if="scope.row.type == 3" type="danger">会议</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否面谈" prop="is_interview" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.is_interview == 1" type="success">是</el-tag>
                        <el-tag v-if="scope.row.is_interview == 0" type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="下次沟通时间" prop="next_time" align="center"></el-table-column>
                <el-table-column label="创建时间" prop="create_time" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>

export default {
	name: '客户管理',
	data() {
		return {
			apiObj: this.$API.client.follow.list,
			selection: [],
			search: {
				create_time: null,
				phone: null,
			},
            humList:[],
            humProps: {
                value: "id",
                multiple: true,
            },
		}
	},
	mounted() {
        // this.getHum()
	},
	methods: {
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
        async getHum(){
            var res = await this.$API.clue.clientSource.list.get();
            this.humList = res.data
        },
	}
}
</script>

<style>
.titleBox {
	font-size: 14px;
	font-weight: 500;
	color: #0099ff;
	margin-left: 30px;
}
</style>
